<template>
  <!-- 添加或修改项目基础信息管理对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body :close-on-click-modal="false" v-dialogDrag>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-tabs v-model="activeName" class="detail-tab" type="card">
        <el-tab-pane label="基本信息" name="first">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="项目名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入项目名称" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="业务员" prop="master">
                <el-input v-model="form.master" placeholder="请输入业务员" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="买方" prop="customId">
                <el-select v-model="form.customId" placeholder="请选择买方" filterable
                           clearable disabled
                           style="width: 300px">
                  <el-option v-for="dict in dict.type.goods_customer" ref="myselectCustomerForPrj"
                  :key="dict.value" :label="dict.label + '('+ dict.code + ')'" :value="dict.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="乙方" prop="companyName">
                <el-select v-model="form.companyName" placeholder="请选择乙方" filterable clearable disabled
                           style="width: 300px">
                  <el-option v-for="dict in dict.type.company"
                             :key="dict.value" :label="dict.label" :value="dict.value"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="订单金额" prop="contractMoney">
                <el-input-number :precision="2" v-model="form.contractMoney" placeholder="请输入订单金额" disabled
                />
                元
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="审计后金额" prop="auditMoney">
                <el-input-number :precision="2" v-model="form.auditMoney" placeholder="请输入审计后金额" disabled/>
                元
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="剩余回款" prop="remainMoney">
                <el-input-number :precision="2" v-model="form.remainMoney" placeholder="请输入剩余回款"
                                 disabled/>
                元
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="剩余开票金额" prop="taxRemain">
                <el-input-number :precision="2" v-model="form.taxRemain" disabled placeholder="请输入剩余开票金额"/>
                元
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="费用金额" prop="feeMoney">
                <el-input-number :precision="2" v-model="form.feeMoney" placeholder="请输入费用金额"
                                 disabled/>
                元
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="销售金额" prop="saleMoney">
                <el-input-number :precision="2" v-model="form.saleMoney" placeholder="请输入销售金额"
                                 disabled/>
                元
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="销售成本" prop="buyMoney">
                <el-input-number :precision="2" v-model="form.buyMoney" placeholder="请输入销售成本"
                                 disabled/>
                元
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="利润" prop="profitMoney">
                <el-input-number :precision="2" v-model="form.profitMoney" placeholder="请输入利润"
                                 disabled/>
                元
                <el-button type="primary" @click="refreshProfit">重新计算</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>

    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增费用</el-button>

    <el-table border v-loading="loading" :data="columns" ref="table"><!-- @selection-change="handleSelectionChange" :max-height="tableMaxHeight"-->
<!--      <el-table-column type="selection" width="55" align="center"/>-->
      <el-table-column label="费用名称" align="center" prop="name"/>
      <el-table-column label="费用类型" align="center" prop="type">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.fee_type" :value="scope.row.type"/>
        </template>
      </el-table-column>
      <el-table-column label="费用状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.fee_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="金额" align="center" prop="money"/>
      <el-table-column label="归属部门" align="center" prop="deptName"/>
      <el-table-column label="备注" align="center" prop="remark"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <template v-if="!scope.row.imburseId">
            <!--<el-button size="mini" type="text" icon="el-icon-edit"
                       @click="handleUpdate(scope.row)" v-hasPermi="['develop:GoodsFee:edit']">修改
            </el-button>-->
            <el-popconfirm :title="`确认删除当前数据项？`" @confirm="handleDelete(scope.row)"
                           style="margin-left: 10px;">
              <el-button slot="reference" size="mini" type="text" icon="el-icon-delete"
                         v-hasPermi="['develop:GoodsFee:remove']">删除
              </el-button>
            </el-popconfirm>
            <el-button size="mini" type="text" icon="el-icon-s-promotion" style="margin-left: 10px;"
                       @click="handleCreateReimburse(scope.row)" v-hasPermi="['develop:GoodsFee:edit']">生成报销申请
            </el-button>
          </template>
          <el-tag  v-else>已提交报销</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <div slot="footer" class="dialog-footer">
      <!--      <el-button type="primary" @click="submitForm">确 定</el-button>-->
      <el-button @click="cancel">取 消</el-button>
    </div>
    <goods-fee-form ref="goodsFeeForm" @ok="refreshPageData"></goods-fee-form>
    <goods-reimbursement-form-for-fee ref="goodsReimbursementFormForFee" @ok="getList"></goods-reimbursement-form-for-fee>
  </el-dialog>
</template>

<script>

    import {addAction, deleteAction, getAction, getById, updateAction} from '@/api/manage'
    import {updateGoodsSale} from '@/api/develop/goodsProject'
    import GoodsFeeForm from "../../goodsFee/module/GoodsFeeForm";
    import GoodsReimbursementFormForFee from "../../goodsReimbursement/module/GoodsReimbursementFormForFee";

    export default {
        name: "ProjectBaseInfoFormGoodsFee",
        dicts: ['goods_customer', 'company', 'fee_type', 'fee_status'],
        components: {
            GoodsFeeForm,
            GoodsReimbursementFormForFee,
        },
        data() {
            return {
                // 遮罩层
                loading: true,
                activeName: "first",
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 表单参数
                form: {},
                proId: "",
                columns: [],
                total: 0,
                // 表单校验
                rules: {
                    name: [
                        {required: true, message: "项目名称不能为空", trigger: "blur"}
                    ],
                    master: [
                        {required: true, message: "业务员不能为空", trigger: "blur"}
                    ],
                    customId: [
                        {required: true, message: "买方信息不能为空", trigger: "blur"}
                    ],
                },
                queryParams: {
                    pageNum: 1,
                    pageSize: 1000,
                    id: null,
                    name: null,
                    taxNo: null,
                    addr: null,
                    tel: null,
                    bankName: null,
                    bankNo: null,
                    info: null,
                    delFlag: null,
                    createBy: null,
                    createTime: null,
                    updateBy: null,
                    updateTime: null,
                    remark: null,
                },
                url: {
                    // list: '/goodsSale/goodsSale/listSaleProject',
                    feeList: '/goodsFee/goodsFee/list',
                    // listBatch: '/goodsSale/goodsSale/listBatchSale/',
                    getById: '/projectBaseInfo/projectBaseInfo/',
                    // add: '/projectBaseInfo/projectBaseInfo/add',
                    // edit: '/projectBaseInfo/projectBaseInfo/edit',
                    remove: '/goodsFee/goodsFee/',
                },
            };
        },
        created() {

        },
        methods: {
            //生成报销单
            handleCreateReimburse(row){
                let that = this;
                that.$refs.goodsReimbursementFormForFee.createReimburseFromFee(row, "2");
            },
            handleUpdate(row) {
                this.reset();
                const id = row.id || this.ids;
                this.proId = id;
                getById(this.url.getById, id).then(response => {
                    this.form = response.data;
                    this.open = true;
                    this.title = "项目研发经费";
                    this.getList();
                });
            },
            getList() {
                let that = this;
                that.loading = true;
                that.queryParams.proId = that.proId;
                getAction(that.url.feeList, that.queryParams).then(response => {
                    that.columns = response.rows;
                    that.loading = false;
                });
            },
            //新增费用
            handleAdd(){
                let that = this;
                that.$refs.goodsFeeForm.addFeeFromProject(that.form);
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids;
                deleteAction(this.url.remove, ids).then(response => {
                    this.refreshPageData();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => {
                });
            },
            //重新计算利润,因部分旧数据未参与计算 : 商品销售金额为新增加字段
            refreshProfit() {
                let that = this;
                let params = {id: this.proId};
                getAction("/projectBaseInfo/projectBaseInfo/refreshProfit", params).then(response => {
                    that.refreshPageData();
                });
            },
            refreshPageData() {
                let that = this;
                let param = {
                    id: that.proId
                }
                that.handleUpdate(param);

            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    id: null,
                    delFlag: null,
                    createBy: null,
                    createTime: null,
                    updateBy: null,
                    updateTime: null,
                    remark: null,
                    name: null,
                    master: null,
                    customId: null,
                    customName: null,
                    companyName: null,
                    contractDate: null,
                    contractMoney: null,
                    auditMoney: null,
                    checkDate: null,
                    checkState: null,
                    fundCallback: null,
                    infomation: null
                };
                this.resetForm("form");
            },
        }
    };
</script>
